<template>
  <view class="centent">
    <!-- 选择图片 -->
    <view class="img-center">
      <view
        class="img-box"
        :style="{ width: img_width + 'rpx', height: img_height + 'rpx' }"
        v-if="!img_url"
      >
      </view>
      <image
        :src="img_url"
        mode="widthFix"
        class="move_img"
        v-if="img_url"
      ></image>
      <p class="changeimg" @click="chooseimg">更换图片</p>
    </view>

    <searchGoodList
      :goodList="res_list"
      :show_popup="true"
      @handleTabCondition="handleTabCondition"
    ></searchGoodList>
  </view>
</template>

<script>
import searchGoodList from "../../components/search/searchGoodList.vue";
export default {
  components: {
    searchGoodList
  },
  data() {
    return {
      img_url: "", //图片地址
      res_list: [], //搜索结果列表
      img_height: 200,
      img_width: 200,
      get_searchId: "", //获取搜图接口的id
      currentTabCondition: {}, // 当前列表搜索条件
      defaultTabCondition: {
        text: "综合",
        haveSequence: false,
        sequenceTop: 1,
        sequenceDown: 0,
        sort: 0
      }, // 默认列表搜索条件
      page_count: 1,
      sort: 0 // 0：综合 1：时间最新 2：价格(sort_type: 0升序 1倒叙) 3：销量倒叙
    };
  },
  onLoad(options) {
    this.img_url = options.img_url ? options.img_url : "";
    if (!this.img_url) {
      this.chooseimg();
    } else {
      this.set_base();
    }
  },
  onReachBottom() {
    this.page_count++;
    if (this.page_count > Math.ceil(this.total_count / this.page_size)) return;
    let params = {
      keyword: this.searchVal,
      sort: this.currentTabCondition.sort,
      loadMore: true,
      page: this.page_count
    };
    if (this.currentTabCondition.sort == 2) {
      params["sort_type"] = this.currentTabCondition.sort_type;
    }
    this.searchRequest(params);
  },
  methods: {
    // 点击列表tab搜索条件回调
    handleTabCondition(e) {
      let item = e.item;
      if (item.text === this.currentTabCondition.text && item.text != "价格")
        return;
      this.currentTabCondition = item;
      this.page_count = 1;
      this.getSearchList();
    },
    // 请求前数据处理
    getSearchList() {
      let params = {
        goods_id: this.get_searchId.join(),
        keyword: "",
        page: this.page_count,
        sort: this.currentTabCondition.sort || "0"
      };
      if (
        this.currentTabCondition.text === "价格" &&
        this.currentTabCondition.sort_type != undefined
      ) {
        params["sort_type"] = this.currentTabCondition.sort_type;
      }

      if (this.isTimeSearch) {
        this.hotelSearch({
          start_time: `${this.timeParams.start.year}-${this.timeParams.start.month}-${this.timeParams.start.day}`,
          end_time: `${this.timeParams.end.year}-${this.timeParams.end.month}-${this.timeParams.end.day}`,
          ...params
        });
        return;
      }
      this.searchRequest(params);
    },
    // 调用接口请求搜索数据
    searchRequest(params, type = "good") {
      uni.showLoading({
        title: this.$t("list.search"),
        mask: true
      });

      this.$allrequest.search.getSearchList(params).then((res) => {
        if (!res.code && res.data) {
          uni.hideLoading();
          if (params.loadMore) {
            this.res_list = [...this.res_list, ...res.data.list];
          } else {
            this.res_list = res.data.list;
          }
        }
      });
    },
    set_base() {
      if (this.img_url) {
        uni.getFileSystemManager().readFile({
          filePath: this.img_url,
          encoding: "base64",
          success: async (res) => {
            var base64 = "data:image/png;base64," + res.data;
            const result = await this.$allrequest.cropping.pending_img(
              { image: base64 },
              true
            );
            this.get_searchId = result.data;
            if (this.get_searchId.length) {
              this.getSearchList();
            }
          }
        });
      }
    },
    getEle() {
      var query = uni.createSelectorQuery().in(this);
      query
        .select(".result-for")
        .boundingClientRect((data) => {
          this.img_height = data.width * 2;
        })
        .exec();
    },
    chooseimg() {
      this.$utils.uploadImage(1, (res) => {
        uni.redirectTo({
          url: `/cropping/cropping/cropping?img_url=${res}`
        });
      });
    }
  }
};
</script>

<style lang="scss">
.centent {
  width: 100vw;
  height: 100vh;
  position: relative;
  background: white;
  // overflow: hidden;
  .img-center {
    position: fixed;
    top: 90rpx;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 999;
    .img-box {
      border-radius: 20rpx;
      border: 2rpx solid #afafaf;
    }
    .move_img {
      width: 200rpx;
      border-radius: 20rpx;
    }
    > p {
      background: #f85c3d;
      width: 180rpx;
      height: 60rpx;
      line-height: 60rpx;
      text-align: center;
      border-radius: 30rpx;
      color: white;
      font-size: 28rpx;
      margin-top: 6rpx;
    }
  }
  .img-result {
    margin-top: 266rpx;
    display: flex;
    align-items: center;
    padding: 0 20rpx;
    flex-wrap: wrap;
    justify-content: space-between;
    .result-for {
      width: 49%;
      flex-shrink: 0;
      margin-bottom: 20rpx;
      border-radius: 20rpx;
      img {
        border-radius: 20rpx 20rpx 0 0;
        width: 100%;
      }
      .for-text {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 20rpx;
        .text-name {
          margin-bottom: 24rpx;
          width: 100%;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          font-size: 26rpx;
        }
        .text-price {
          display: flex;
          font-size: 28rpx;
          color: red;
          span {
            font-size: 20rpx;
            color: red;
            margin-right: 6rpx;
          }
        }
      }
    }
  }
}
</style>
